import React, { useState } from 'react';
import {
    Button,
    Col,
    Form,
    Input,
    Row,
    Space
} from 'antd';
import {
    SearchOutlined,
    ReloadOutlined
} from '@ant-design/icons';

interface SearchFormProps {
    onSearch: (params: any) => void;
    onReset: () => void;
}

const Search: React.FC<SearchFormProps> = ({ onSearch, onReset }) => {
    const [form] = Form.useForm();

    const handleSearch = () => {
        form.validateFields().then(values => {
            // 移除空值
            Object.keys(values).forEach(key => {
                if (values[key] === undefined || values[key] === '') {
                    delete values[key];
                }
            });

            onSearch(values);
        });
    };

    const handleReset = () => {
        form.resetFields();
        onReset();
    };

    return (
        <Form
            form={form}
            name="group_search"
            style={{
                borderRadius: '6px',

            }}
        >
            <Row gutter={24} align="middle">
                <Col span={8}>
                    <Form.Item name="name">
                        <Input placeholder="请输入小组名称" allowClear />
                    </Form.Item>
                </Col>
                <Col span={16}>
                    <Form.Item>
                        <Space>
                            <Button
                                type="primary"
                                icon={<SearchOutlined />}
                                onClick={handleSearch}
                            >
                                搜索
                            </Button>
                            <Button
                                icon={<ReloadOutlined />}
                                onClick={handleReset}
                            >
                                重置
                            </Button>
                        </Space>
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    );
};

export default Search;